Ext.define('NIM.view.Administration.AssetCategory', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.Asset_Category',
    id: 'asset_category',
    title: 'Asset Category',
    border: false,
    height: 590,
    closable: true,
    layout: {
        type: 'border'
    },
    listeners: {
        afterrender: function () {
            Ext.getStore('Administration.AssetCategory').load();
            Ext.getStore('AssetDataMaster.MainCat').load();
        }
    },
    items: [
        {
            xtype: 'form',
            id: 'ConfigAssetCategory',
            title: 'Configuration',
            region: 'west',
            margin: '5 5 5 5',
            method: 'POST',
            url: './Services/DataMaster/AssetCategory/Update',
            collapsed: true,
            collapsible: true,
            autoScroll: true,
            width: 400,
            listeners: {
                 
            },
            items: [
                {
                    xtype: 'hiddenfield',
                    cls: 'black',
                    id: 'categoryId',
                    name: 'CATEGORY_ID',
                    margin: '5 10 5 25',
                    labelWidth: 100 / 1366 * screen.width,
                    width: 300 / 1366 * screen.width,
                    fieldLabel: 'Site ID',
                    msgTarget: 'title',
                    allowBlank: true,
                    validateBlank: false

                },
                {
                    xtype: 'textfield',
                    cls: 'black',
                    id: 'MAIN_CATEGORY',
                    name: 'MAIN_CATEGORY',
                    margin: '15 10 10 10',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 325 / 1366 * screen.width,
                    fieldLabel: 'Main Category',
                    msgTarget: 'title',
                    allowBlank: true,
                    validateBlank: false,
                    enableKeyEvents: true,
                    listeners : {
                    	keyup : function(field, event, eOpts ){ 
	            			 Ext.getCmp('CATEGORY').setValue (
	                		 Ext.getCmp('MAIN_CATEGORY').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_1').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_2').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_3').getValue().trim() );
                		},buffer:300   
                	}
                },
                {
                    xtype: 'textfield',
                    cls: 'black',
                    name: 'SUB_CATEGORY_1',
                    id: 'SUB_CATEGORY_1',
                    margin: '10 10 10 10',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 325 / 1366 * screen.width,
                    fieldLabel: 'Sub Category 1',
                    msgTarget: 'title',
                    allowBlank: true,
                    validateBlank: false,
                    enableKeyEvents: true,
                    listeners : {
                    	keyup : function(field, event, eOpts ){ 
	            			 Ext.getCmp('CATEGORY').setValue (
	                		 Ext.getCmp('MAIN_CATEGORY').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_1').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_2').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_3').getValue().trim() );
                		},buffer:300   
                	}
                },
                {
                    xtype: 'textfield',
                    cls: 'black',
                    id: 'SUB_CATEGORY_2',
                    name: 'SUB_CATEGORY_2',
                    margin: '10 10 10 10',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 325 / 1366 * screen.width,
                    fieldLabel: 'Sub Category 2',
                    msgTarget: 'title',
                    allowBlank: true,
                    validateBlank: false,
                    enableKeyEvents: true,
                    listeners : {
                    	keyup : function(field, event, eOpts ){ 
	            			 Ext.getCmp('CATEGORY').setValue (
	                		 Ext.getCmp('MAIN_CATEGORY').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_1').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_2').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_3').getValue().trim() );
                		},buffer:300   
                	}
                },
                {
                    xtype: 'textfield',
                    cls: 'black',
                    id: 'SUB_CATEGORY_3',
                    name: 'SUB_CATEGORY_3',
                    margin: '10 10 10 10',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 325 / 1366 * screen.width,
                    fieldLabel: 'Sub Category 3',
                    msgTarget: 'title',
                    allowBlank: true,
                    validateBlank: false,
                    enableKeyEvents: true,
                    listeners : {
                    	keyup : function(field, event, eOpts ){ 
	            			 Ext.getCmp('CATEGORY').setValue (
	                		 Ext.getCmp('MAIN_CATEGORY').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_1').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_2').getValue().trim()+"."+
	        				 Ext.getCmp('SUB_CATEGORY_3').getValue().trim() );
                		},buffer:300   
                	}
                },
                {
                    xtype: 'textfield',
                    cls: 'black',
                    id: 'CATEGORY',
                    name: 'CATEGORY',
                    margin: '10 10 10 10',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 325 / 1366 * screen.width,
                    fieldLabel: 'Category',
                    msgTarget: 'title',
                    allowBlank: true,
                    enableKeyEvents: true
                },
                {
                    xtype: 'textfield',
                    cls: 'black',
                    id: 'CATEGORYtemp',
                    name: 'CATEGORYtemp',
                    margin: '10 10 10 10',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 325 / 1366 * screen.width,
                    fieldLabel: 'Category',
                    msgTarget: 'title',
                    allowBlank: true,
                    enableKeyEvents: true
                },
                {
                    xtype: 'textareafield',
                    grow: true,
                    name: 'DESCRIPTION',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 325 / 1366 * screen.width,
                    margin: '10 10 10 10',
                    fieldLabel: 'Description',
                    anchor: '100%',
                },
                {
                    xtype: 'fieldcontainer',
                    cls: 'black',
                    name: 'STATUS',
                    margin: '10 10 10 10',
                    fieldLabel: 'Active',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 325 / 1366 * screen.width,
                    defaultType: 'radiofield',
                    defaults: {
                        flex: 1
                    },
                    layout: 'hbox',
                    items: [
                        {
                            boxLabel: 'Yes',
                            id: 'active_category',
                            name: 'active',
                            inputValue: 'true'
                        },
                        {
                            boxLabel: 'No',
                            id: 'disactive_category',
                            name: 'active',
                            inputValue: 'false'
                        }
                    ]
                },
                {
                    xtype: 'combobox',
                    name: 'FORM',
                    labelWidth: 130 / 1366 * screen.width,
                    width: 320 / 1366 * screen.width,
                    margin: '10 10 10 10',
                    fieldLabel: 'Form',
                    emptyLabel: 'Default',
                    store: [['DEFAULT', 'DEFAULT'], ['PLN', 'PLN'], ['TOWER', 'TOWER'], ['LAND', 'LAND']],
                },
                {
                    xtype: 'fieldset',
                    title: 'Additional Field',
                    margin: '5 5 5 5',
                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Field 1',
                            items: [
                                {
                                    xtype: 'textfield',
                                    id: 'FIELD1_LABEL',
                                    name: 'FIELD1_LABEL',
                                    fieldLabel: 'Label',
                                    value: 'Field 1',
                                    allowBlank: true,
                                },
                                {
                                    xtype: 'checkbox',
                                    id: 'FIELD1_CHECK',
                                    name: 'FIELD1_CHECK',
                                    fieldLabel: 'Enable',
                                    allowBlank: true,
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            title: 'Field 2',
                            items: [
                                {
                                    xtype: 'textfield',
                                    id: 'FIELD2_LABEL',
                                    name: 'FIELD2_LABEL',
                                    fieldLabel: 'Label',
                                    value: 'Field 2',
                                    allowBlank: true,
                                },
                                {
                                    xtype: 'checkbox',
                                    id: 'FIELD2_CHECK',
                                    name: 'FIELD2_CHECK',
                                    fieldLabel: 'Enable',
                                    allowBlank: true,
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            title: 'Field 3',
                            items: [
                                {
                                    xtype: 'textfield',
                                    id: 'FIELD3_LABEL',
                                    name: 'FIELD3_LABEL',
                                    fieldLabel: 'Label',
                                    value: 'Field 3',
                                    allowBlank: true,
                                },
                                {
                                    xtype: 'checkbox',
                                    id: 'FIELD3_CHECK',
                                    name: 'FIELD3_CHECK',
                                    fieldLabel: 'Enable',
                                    allowBlank: true,
                                }
                            ]
                        }

                    ]
                },
                {
                    xtype: 'button',
                    id: 'ButtonAddMasterCategory',
                    margin: '5 10 10 10',
                    width: 50 / 1366 * screen.width,
                    text: 'Insert',
                    handler: function () {
                        this.up('form').getForm().submit({
                            waitMsg: 'Please Wait ....',
                            success: function (form, action) {
                                afterSubmitInformation(form, action);
                                this.up('form').getForm().reset();
                                RefreshAssetCategory();
                            },
                            failure: function (form, action) {
                                afterSubmitInformation(form, action);
                                Ext.getCmp('ButtonAddMasterCategory').setText('Insert');
                                Ext.getStore('Administration.AssetCategory').load();
                                Ext.getCmp('ConfigAssetCategory').toggleCollapse(false);
                            }
                        });
                    },
                },
                {
                    xtype: 'button',
                    margin: '5 10 10 0',
                    width: 50 / 1366 * screen.width,
                    text: 'Clear',
                    handler: function () {
                        emptyfieldCategory();
                    }
                }
            ]
      },
        {
            xtype: 'gridpanel',
            region: 'center',
            id: 'table_assetCategory',
            height: 590,
            width: 400,
            titleAlign: 'center',
            margin: '5 5 5 0',
            border: true,
            forceFit: true,
            columnLines: true,
            selType: 'checkboxmodel',
            store: 'Administration.AssetCategory',
            title: 'Asset Category List',
            columns: [
                {dataIndex: 'MAIN_CATEGORY', text: 'MAIN CATEGORY', align: 'left'},
                {dataIndex: 'SUB_CATEGORY_1', text: 'SUB CATEGORY 1', align: 'left'},
                {dataIndex: 'SUB_CATEGORY_2', text: 'SUB CATEGORY 2', align: 'left'},
                {dataIndex: 'SUB_CATEGORY_3', text: 'SUB CATEGORY 3', align: 'left'},
                {dataIndex: 'CATEGORY', text: 'CATEGORY', align: 'left'},
                {dataIndex: 'STATUS', text: 'ACTIVE', align: 'left'}
            ],
            dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    dock: 'bottom',
                    store: 'Administration.AssetCategory',
                    displayInfo: true
                },
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
		                    xtype: 'combobox',
		                    cls: 'black',
		                    id: 'mainCat',
		                    name: 'mainCat',
		                    margin: '10 10 5 5',
                            width: 100 / 1366 * screen.width,
		                    displayField: 'MAIN_CATEGORY',
		                    valueField: 'MAIN_CATEGORY',
		                    emptyText: 'Main Cat.',
		                    msgTarget: 'title',
		                    queryMode: "local",
		                    allowBlank: true,
		                    forceSelection: true,
		                    store: 'AssetDataMaster.MainCat',
		                    listeners: {
		                        change: function (obj, newValue, oldValue, eOpts) {
		                            var mainCat = Ext.getCmp("mainCat").getValue();
		                            Ext.getStore('AssetDataMaster.SubCat1').removeAll();
		                            Ext.getStore('AssetDataMaster.SubCat1').getProxy().url = './Services/DataMaster/SubCat1/List?MAIN_CATEGORY=' + mainCat;
		                            Ext.getStore('AssetDataMaster.SubCat1').load();
		                        }
		                    }
		                },
		                {
                            xtype: 'combobox',
                            cls: 'black',
                            id: 'subCat1',
                            name: 'subCat1',
                            margin: '10 10 5 5',
                            width: 100 / 1366 * screen.width,
                            displayField: 'SUB_CATEGORY_1',
                            valueField: 'SUB_CATEGORY_1',
                            emptyText: 'Sub Cat. 1',
                            msgTarget: 'title',
                            queryMode: "local",
                            allowBlank: true,
                            forceSelection: true,
                            store: 'AssetDataMaster.SubCat1',
                            listeners: {
                                change: function (obj, newValue, oldValue, eOpts) {
                                    var subCat1 = Ext.getCmp("subCat1").getValue();
                                    Ext.getStore('AssetDataMaster.SubCat2').removeAll();
                                    Ext.getStore('AssetDataMaster.SubCat2').getProxy().url = './Services/DataMaster/SubCat2/List?SUB_CATEGORY_1=' + subCat1;
                                    Ext.getStore('AssetDataMaster.SubCat2').load();
                                }
                            }
                        },
                        {
                            xtype: 'combobox',
                            cls: 'black',
                            id: 'subCat2',
                            name: 'subCat2',
                            margin: '10 10 5 5',
                            width: 100 / 1366 * screen.width,
                            displayField: 'SUB_CATEGORY_2',
                            valueField: 'SUB_CATEGORY_2',
                            emptyText: 'Sub Cat. 2',
                            msgTarget: 'title',
                            queryMode: "local",
                            allowBlank: true,
                            forceSelection: true,
                            store: 'AssetDataMaster.SubCat2',
                            listeners: {
                                change: function (obj, newValue, oldValue, eOpts) {
                                    var subCat2 = Ext.getCmp("subCat2").getValue();
                                    Ext.getStore('AssetDataMaster.SubCat3').removeAll();
                                    Ext.getStore('AssetDataMaster.SubCat3').getProxy().url = './Services/DataMaster/SubCat3/List?SUB_CATEGORY_2=' + subCat2;
                                    Ext.getStore('AssetDataMaster.SubCat3').load();
                                }
                            }
                        },
                        {
                            xtype: 'combobox',
                            cls: 'black',
                            id: 'subCat3',
                            name: 'subCat3',
                            margin: '10 10 5 5',
                            width: 100 / 1366 * screen.width,
                            displayField: 'SUB_CATEGORY_3',
                            valueField: 'SUB_CATEGORY_3',
                            emptyText: 'Sub Cat. 3',
                            msgTarget: 'title',
                            allowBlank: true,
                            forceSelection: true,
                            queryMode: "local",
                            store: 'AssetDataMaster.SubCat3'
                        },
                        {
                            xtype: 'textfield',
                            emptyText: 'Keyword',
                            width: 130 / 1366 * screen.width,
                            id: 'keyword',
                            margin: '0 0 0 10',
                            enableKeyEvents: true,
                            listeners: {
                                keypress: function (form, e) {
                                    if (e.getKey() == 13) {
                                        SearchAssetCategory();
                                    }

                                }
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'SEARCH',
                            margin: '0 10 0 5',
                            handler: function () {
                                SearchAssetCategory();
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'ADD NEW',
                            margin: '0 10 0 0',
                            handler: function () {
                                emptyfieldCategory();
                                if (Ext.getCmp('ConfigAssetCategory').hidden == true){
                                    Ext.getCmp('ConfigAssetCategory').toggleCollapse(true);
                                	Ext.getCmp('ButtonAddMasterCategory').setText('Update');
                                }
                            }

                        },
                        {
                            xtype: 'button',
                            text: 'DELETE',
                            margin: '0 10 0 0',
                            handler: function () {
                                DeleteAssetCategory();
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'REFRESH',
                            handler: function () {
                                RefreshAssetCategory();
                            }
                        }
                    ]
                }
            ],
            listeners: {
                afterrender: function () {
                    Ext.getStore('Administration.AssetCategory').load();
                },
                itemdblclick: function (grid, record) {
                    getValueGridAssetCategory(record);
                }
            },
        }
    ]

});